import React, { useEffect } from 'react';
import {
  Space,
  Button,
  Form,
  Input,
  Select,
  DatePicker,
} from '@arco-design/web-react';

const FormItem = Form.Item;

function Search(props) {
  const { onSearch, statusOptions, communityOptions } = props;

  const [form] = Form.useForm();
  const reset = () => {
    form.resetFields();
    onSearch({});
  };

  useEffect(()=>{
    form.setFieldsValue({ CommunityDataKey: 'CampusCommunity' });
  },[])
  return (
    <Form
      form={form}
      autoComplete="off"
      layout="inline"
      style={{ marginTop: '20px' }}
      onSubmit={(values) => {
        onSearch(values);
      }}
    >
      <Space wrap size={[20, 20]}>
        <FormItem label="校园账号" field="Name">
          <Input placeholder="输入校园账号" />
        </FormItem>
        <FormItem label="文章标题" field="Title">
          <Input placeholder="输入文章标题" />
        </FormItem>
        <FormItem label="社区" field="CommunityDataKey">
          <Select
            placeholder="请选择"
            options={communityOptions}
            onChange={() => {
              form.submit();
            }}
            autoWidth={{ minWidth: 200, maxWidth: 500 }}
          ></Select>
        </FormItem>
        <FormItem label="创建时间" field="CreatedTime">
          <DatePicker.RangePicker />
        </FormItem>
        <FormItem label="状态" field="ContentStatus">
          <Select
            allowClear
            placeholder="请选择"
            options={statusOptions}
            onChange={() => {
              form.submit();
            }}
            autoWidth={{ minWidth: 200, maxWidth: 500 }}
          ></Select>
        </FormItem>

        <FormItem>
          <Space size={20}>
            <Button htmlType="submit" type="primary">
              查询
            </Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </FormItem>
      </Space>
    </Form>
  );
}

export default Search;
